import React, { PureComponent,Fragment } from "react";
import { connect } from "dva";
// import MaintainChange from "./MaintainChange";
import { Row, Col, Table, Spin, Button } from "antd";
import styles from '../../Pbulic.less';


const columns = [{
  title: '序号',
  dataIndex: 'index',
  render: (text, row, index)=> (
    <span>{index+1}</span>
  ),
}, {
  title: '设备编号',
  dataIndex: 'devCode',
}, {
  title: '设备名称',
  dataIndex: 'devName',
},{
  title: '规格型号',
  dataIndex: 'devModel',
},{
  title: '安装区域',
  dataIndex: 'districtName',
},{
  title: '安装点位',
  dataIndex: 'pointName',
}];


@connect(({ equipment_maintain, loading }) => ({
  tableData: equipment_maintain.serviceEquipment,
  loading: loading.models.equipment_maintain,
}))
export default class Repairlog extends PureComponent {
  constructor(props) {
    super(props);
    this.state={
      currentPage: 1,
      pageSize: 10,
      selectedRows: [],
      modalVisible: false,
    }
  }

  componentDidMount() {
    const {currentPage,pageSize} = this.state;
    this.getDataList(pageSize,currentPage)
  }

  getDataList(pageSize,currentPage) {
    const { dispatch,detailInfoId } = this.props;
    dispatch({
      type: 'equipment_maintain/fetch_service_equipment',
      payload: {
        maintenanceId: detailInfoId,
      },
    });
  }

  // 分页、排序、筛选变化时触发
  handleTableChange = (pagination, filtersArg, sorter) => {
    const { pageSize } = this.state;

    this.setState({
      currentPage:pagination.current
    },()=>{
      this.getDataList(pageSize,pagination.current);
    })

  };

  // 表格复选框选中
  handleSelectRows = (selectedRowKeys, selectedRows) => {
    this.setState({
      selectedRows: selectedRowKeys,
    });
  };

  // 显示model
  handleModalVisible = flag => {
    this.setState({
      modalVisible: !!flag,
    });
  };

  // model确认后回调
  handleModelCallBack=(value)=>{
    this.handleModalVisible(false);
    const { dispatch } = this.props;
    const { selectedRows,pageSize } = this.state;

    if(value && selectedRows && selectedRows.length>0){
      dispatch({
        type: 'equipment_maintain/action_maintain_change',
        payload: {
          devIds:selectedRows,
          ...value
        },
      }).then(()=>{
        this.setState({
          selectedRows: [],
        });
      }).then(()=>{
        this.getDataList(pageSize,1)
      });
    }

  }

  render() {
    const { tableData,loading } = this.props;
    const { modalVisible,selectedRows } = this.state;



    const rowSelection = {
      // selectedRowKeys,
      onChange: this.handleSelectRows,
      getCheckboxProps: record => ({
        disabled: record.disabled,
      }),
    };

    return (
      <Fragment>
        {/*
        <Button type="primary"
                onClick={()=>this.handleModalVisible(true)}
                style={{position:'absolute',top:15,right:15}}
                disabled={selectedRows.length>0 ? false : true}
        >移动</Button>
         */}
        <Table
          columns={columns}
          dataSource={tableData.list ? tableData.list : []}
          pagination={tableData.pagination}
          // rowSelection={rowSelection}
          onChange={this.handleTableChange}
          loading={loading}
          rowKey={"devId"}
        />
        {/*
           // 移除移动功能
           <MaintainChange
            visible={modalVisible}
            onCancel={e => this.handleModalVisible(e)}
            callback={this.handleModelCallBack}
          />
        */}

      </Fragment>

    );
  }
}
